<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/templates/common/taglib.jsp"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%


String officeJson= (String)request.getAttribute("officeJson");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>${title }</title>
<link rel="stylesheet"
	href="${basePath}/static/bootstrap/css/bootstrap.css" />
<link href="${basePath}/static/css/basic.css" rel="stylesheet"
	type="text/css">
<link href="${basePath}/static/css/login.css" rel="stylesheet"
	type="text/css">
<link href="${basePath}/static/css1/lyh.css" rel="stylesheet"
	type="text/css">
<link href="${basePath}/static/css/list.css" rel="stylesheet"
	type="text/css">
<link href="${basePath}/static/assert/jquery-autocomplete/css/main.css" rel="stylesheet"
	type="text/css">
<link href="${basePath}/static/assert/jquery-autocomplete/css/normalize.css" rel="stylesheet"
	type="text/css">
<link rel="stylesheet" type="text/css"
	href="${basePath}/static/css1/index.css">
<script type="text/javascript" src="${basePath}/static/js/jquery.min.js"></script>
<script type="text/javascript" src="${basePath}/static/assert/jquery-autocomplete/js/main.js"></script>
<script type="text/javascript" src="${basePath}/static/assert/jquery-autocomplete/js/jquery.autocompleter.js"></script>

<script type="text/javascript"
	src="${basePath}/static/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript"
	src="${basePath}/static/page/jqPaginator/jqPaginator.js"></script>
<script  type="text/javascript" src="${basePath}/static/layer/layer.js"></script>
<link href="${basePath}/static/layer/layer_defined.css" rel="stylesheet" type="text/css">
<style type="text/css">
.btn {
	padding: 6px;
}

.input_select {
	height: 28px;
	width: 57%;
}
</style>
</head>
<body class="bj">
	<!--头部-->
	<%@include file="/WEB-INF/templates/common/header.jsp"%>
	<!------导航条-->
	<%@include file="/WEB-INF/templates/common/navigation.jsp"%>

	<!--内容部分-->
	<div class="list_main lay_out" class="clearfix">
		<div class="list_DH">
			<%@include file="/WEB-INF/templates/common/queryNav.jsp"%>
		</div>
		<div class="list_NR" style="min-height:600px">
			<div class="loc">
				<h3>病案检索</h3>
			</div>
			<%-- ${officeList} --%>
			<div  class="list_con_table">
				<div class="search_table">
					<ul>
						<input type="hidden" id="officeList" value="${officeList}">
						<li class="Label_1" style="width: 10%">姓名：&nbsp;</li>
						<li class="Label_2" style="width: 23%"><input
							class="input_box" type="text" name='' id='name' value='' /></li>
						<li class="Label_1">识别码：&nbsp;</li>
						<li class="Label_2"><input class="input_box" type="text"
							name='' id='mrId' value='' /></li>
						<li class="Label_1">身份证：&nbsp;</li>
						<li class="Label_2"><input class="input_box" type="text"
							name='' id='idCard' value='' /></li>
						<li class="Label_1" style="width: 10%">出院日期：&nbsp;</li>
						<li class="Label_2" style="width: 23%"><input
							class="input_box" style="width: 44%" type="text"
							onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" name=''
							id='outHospitalStartTime' value='' />&nbsp;-&nbsp;<input
							class="input_box" style="width: 44%" type="text"
							onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" name=''
							id='outHospitalEndTime' value='' /></li>
						<li class="Label_1">出院科室：&nbsp;</li>
						<li class="Label_2 field">
							<input type="hidden" id="outHospitalOfficeId" value="">
							<input  type="text" name="nope" id="nope"  maxlength="40" />
		
						</li>
						<li class="Label_1">病案号：&nbsp;</li>
						<li class="Label_2">
							<input
							class="input_box" type="text" name='' id='onlyId' value='' />
						</li>

						<li class="Label_1" style="width: 10%">离院方式：&nbsp;</li>
						<li class="Label_3"><c:forEach items="${outHospitalTypeList}"
								var="outHospitalType">
								<label><input type="checkbox"
									class="check_cl" name='outHospitalType' id=''
									value='${outHospitalType.code}' />${outHospitalType.name }</label>
							</c:forEach> <input class="btn_qx" type="button" name=''
							onclick="selectAll()" value='全选' /> <input class="btn_qx"
							type="button" name='' id='' onclick="disableAll()" value='取消' />
						</li>
						<li class="Label_5"><a onclick="init()">查询</a></li>
					</ul>
				</div>
				<table style="width: 934px; height:auto; float: left; border-collapse: collapse;"
					cellpadding="0" cellspacing="0">
					<tr>
						<td class="tdLabel_4">识别码</td>
						<td class="tdLabel_4">姓名</td>
						<td class="tdLabel_4">身份证</td>
						<td class="tdLabel_4">出院科室</td>
						<td class="tdLabel_4">出院时间</td>
						<td class="tdLabel_4">离院方式</td>
						<td class="tdLabel_4">操作</td>
					</tr>
					<tr id="loading" style="height:50px;display:none">
	       				<td colspan="6" align="center" ><img src="${basePath}/static/layer/skin/default/loading-2.gif"></td>
				    </tr>
					<tbody id="tbody"></tbody>
				</table>

			</div>
		</div>
		<!------页脚部分--------->
		<%@include file="/WEB-INF/templates/common/footer.jsp"%>

		<!--JS部分-->
		<script type="text/javascript">
			function init(pageNo, pageSize) {

				var name = $("#name").val();
				var onlyId = $("#onlyId").val();
				var idCard = $("#idCard").val();
				var outHospitalStartTime = $("#outHospitalStartTime").val();
				var outHospitalEndTime = $("#outHospitalEndTime").val();
				var mrId = $("#mrId").val();
				var outHospitalOfficeId = $("#outHospitalOfficeId").val();
				var outHospitalTypeIds = [];
				outHospitalTypeIds = getFormVals("outHospitalType");

				
				if((name=="" || name==null) && (onlyId==null || onlyId=='') && (idCard=="" || idCard==null)&& (outHospitalStartTime=="" || outHospitalStartTime==null)&& (outHospitalEndTime=="" || outHospitalEndTime==null)&& (mrId=="" || mrId==null) && (outHospitalOfficeId=="0" || outHospitalOfficeId==null)
					&&(outHospitalTypeIds=="" || outHospitalTypeIds==null)){
					layer.alert("请至少输入一个查询条件!",{icon:5});
					return;
				}
				
				console.log("name=" + name + "---onlyId=" + onlyId + "---idCard="
						+ idCard + "--mrId=" + mrId + "--outHospitalStartTime="
						+ outHospitalStartTime + "---outHospitalEndTime="
						+ outHospitalEndTime + "---outHospitalOfficeId="
						+ outHospitalOfficeId + "---outHospitalTypeIds="
						+ outHospitalTypeIds);
				jQuery.support.cors = true;
				return;
					$.ajax({
							type : 'get',
							url : "${corePath}/statis/selectMedicalRecordRetrievaListAjax",
							data : {
								name : name,
								idCard : idCard,
								mrId : mrId,
								sexId : sexId,
								outHospitalStartTime : outHospitalStartTime,
								outHospitalEndTime : outHospitalEndTime,
								outHospitalOfficeId : outHospitalOfficeId,
								outHospitalTypeIds : outHospitalTypeIds,
								treatementTypeIds : treatementTypeIds,
								unTreatementTypeIds : unTreatementTypeIds
							},
							beforeSend:function(){
								$("#tbody").html("");
								$("#loading").show();
							},
							success : function(data) {
								$("#loading").hide();
								console.log(data);
								if (data.success) {
									var hospitalNotes = data.data;
									var len = hospitalNotes.length;
									if (len > 0) {
										var html = '';
										for (var i = 0; i < len; i++) {
											var obj = hospitalNotes[i];
											html += "<tr>"
													+ "  <td class='tdLabel_5'>"
													+ (obj.mrId == undefined ? ''
															: obj.mrId)
													+ "</td>"
													+ "  <td class='tdLabel_5'>"
													+ (obj.name == undefined ? ''
															: obj.name)
													+ "</td>"
													+ "  <td class='tdLabel_5'>"
													+ (obj.id_number == undefined ? ''
															: obj.id_number)
													+ "</td>"
													+ "  <td class='tdLabel_5'>"
													+ (obj.officeName == undefined ? ''
															: obj.officeName)
													+ "</td>"
													+ "  <td class='tdLabel_5'>"
													+ (obj.outHospitalDate == undefined ? ''
															: obj.outHospitalDate)
													+ "</td>"
													+ "  <td class='tdLabel_5'>"
													+ (obj.outHospitalType == undefined ? ''
															: obj.outHospitalType)
													+ "</td>"
													+ "  <td class='tdLabel_5'><a class='int' target='_blank' href='${corePath}/medrecord/showMedrecordImage?firstGuid="
													+ obj.guid
													+ "'>图像</a>&nbsp;&nbsp;<a class='int' target='_blank' href='${corePath}/medrecord/medrecordHomePageManage?firstGuid="
													+ obj.guid
													+ "'>首页</a></td>" + "</tr>";

										}

										$("#tbody").html("").html(html);
									} else {
										layer.alert("数据为空!",{icon:5});
										$("#tbody").html("");
									}
								}
							}
						})
			}

			function page(currentPage, totalCounts) {
				var pageSize = 20;
				var visiblePages = 5;
				var totalPages = Math.ceil(totalCounts / pageSize);
				$('#page_plus')
						.jqPaginator(
								{

									totalCounts : totalCounts,
									pageSize : pageSize,
									visiblePages : visiblePages,
									currentPage : currentPage,

									first : '<li class="first"><a href="javascript:void(0);">首页</a></li>',
									prev : '<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
									next : '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
									last : '<li class="last"><a href="javascript:void(0);">末页</a></li>',
									page : '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
									onPageChange : function(num, type) {

										if (type != 'init') {

											init(num, pageSize);
										}

										$("#totalPage").html(totalCounts);
										$("#currentPage").html(
												num + "/" + totalPages);
									}
								});

			}

			//获取checkbox值
			function getFormVals(name) {
				var arr = [];
				$("input[type='checkbox'][name='" + name + "']:checked").each(
						function() {
							arr.push($(this).val());

						});
				return arr.toString();
			}

			function selectAll() {
				$('input[name="outHospitalType"]').each(function() {
					//此处如果用attr，会出现第三次失效的情况  
					$(this).prop("checked", true);
				});
			}

			function disableAll() {
				$('input[name="outHospitalType"]').each(function() {
					//此处如果用attr，会出现第三次失效的情况  
					$(this).prop("checked", false);
				});
			}

			function getRadioValues(className) {
				var arr = [];
				$("." + className + "").each(function() {
					if ($(this).is(':checked')) {
						arr.push($(this).val());
					}
				})
				return arr.toString();
			}
			
			
			
			$(function(){
			
				$(function () {
				var officeJson =<%=officeJson%>;
					
				  $('#nope').autocompleter({
				        // marker for autocomplete matches
				        highlightMatches: true,

				        // object to local or url to remote search
				        source: officeJson,

				        // custom template
				        template: '{{ label }} <span>({{ hex }})</span>',

				        // show hint
				        hint: true,

				        // abort source if empty field
				        empty: false,

				        // max results
				       // limit: 5,

				        callback: function (value, index, selected) {
				            if (selected) {
							
				                $("#outHospitalOfficeId").val(selected.hex);
				            }
				        }
				    });
				});

			})

		</script>
</body>
</html>